import React from 'react'
import ReactDOM from 'react-dom'

// 动态处理class名 Classnames
import './style.css'
const list = [
  { id: 1, name: '刘德华', content: '给我一杯忘情水' },
  { id: 2, name: '五月天', content: '不打扰，是我的温柔' },
  { id: 3, name: '毛不易', content: '像我这样优秀的人' },
]
const isBlue = true
const isPink = true

const element = (
  <>
    {list.length !== 0 ? (
      <div>
        <ul>
          {list.map((item) => (
            <li key={item.id}>
              {
                <>
                  <h2 className={`${isPink ? 'pink' : ''}`}>
                    评论人:{item.name}
                  </h2>
                  <p className={`${isBlue ? 'blue' : ''}`}>
                    评论内容:{item.content}
                  </p>
                </>
              }
            </li>
          ))}
        </ul>
      </div>
    ) : (
      <div>暂无内容</div>
    )}
  </>
)

ReactDOM.render(element, document.getElementById('root'))
